<template>
	<slide-page class="ncu-voice-correct-practise">
		<practiseInfo :option="option" />
		<practisePrepare 
			class="move-in"
			v-if="activeTab === 'prepare'"
			@startTest="startTest" />
		<practiseTrain
			class="move-in"
			v-if="activeTab === 'training'"
			@cancelTest="cancelTest"
			@finishTest="finishTest" />
		<practiseResult
			class="move-in"
			v-if="activeTab === 'result'" />
	</slide-page>
</template>

<script>
	import practiseInfo from './practise/info.vue'
	import practisePrepare from './practise/prepare.vue'
	import practiseTrain from './practise/training.vue'
	import practiseResult from './practise/result.vue'
	import GlobalData from '../common/global.js'
    export default {
		onLoad(option) {
			this.option = option
		},
		components: {
			practiseInfo,
			practisePrepare,
			practiseTrain,
			practiseResult,
		},
        data() {
            return {
				option: {},
				activeTab: '',
            }
        },
		methods: {
			startTest() {
				this.activeTab = 'training'
			},
			cancelTest() {
				this.activeTab = 'prepare'
			},
			finishTest() {
				this.activeTab = 'result'
				GlobalData.initReqResults()
			}
		},
		mounted() {
			setTimeout(() => {
				this.activeTab = 'prepare'
			}, 100)
		}
    }
</script>

<style lang="scss" scoped>
	.ncu-voice-correct-practise {
		
	}
	
	
</style>


